<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 100px;
      height:100px;
    /*  border:10px solid red;*/
     /* border:10px dashed red;*/
   /*   border:10px double red;*/
    /*  border:10px groove red;*/
      border-bottom:10px ridge red;
      border-top:10px ridge yellow;
      /*设置圆角 值越大越圆*/
      border-radius: 30px;
    }

    #d2{
       width:100px;
       height: 100px;
       border: 8px solid green;
       /*内边距会影响元素的显示尺寸*/
       padding-left: 50px;
       padding-top: 50px;
      /*添加此样式后,元素添加边框和内边距时不会影响元素的宽高*/
       box-sizing: border-box;

    }
  </style>
</head>
<body>
<div id="d1">边框测试</div>
<div id="d2">内边距</div>
</body>
</html>